<template>
	<view class="container">
		<!-- 请保证循环的:key是一个唯一值，可以用数据的id或者title替代 -->
		<view class="venue-cell" v-for="(item, index) in venueList" :key="item.id">
			<u-swipe-action btn-width="100" :options="options" :show="item.show" :index="index" @click="click" @open="open" >
				<view class="wd-flex venue-list" :class="{'active':item.is_select}" @click="setShop(item.id)">
					<view class="state" v-if="item.is_select">当前场馆</view>
					<image class="thumb" :src="item.image" mode="aspectFill"></image>
					<view class="wd-flex-cell">
						<view class="title">{{ item.name }}</view>
						<view class="info">{{ item.mobile }}</view>
						<view class="info">{{ item.Area.province }}{{ item.Area.city }}{{ item.Area.region }}{{ item.detail }}</view>
					</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="wd-floating" @click="setShop(0)">
			<u-icon name="plus" color="#fff" size="30" label="新增场馆" label-size="16" label-color="#fff" label-pos="bottom"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [
					{
						text: '停用',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#D8D8D8'
						}
					},
					{
						text: '启动',
						style: {
							whiteSpace: 'nowrap',
							fontSize: '24rpx',
							backgroundColor: '#6D4BBE'
						}
					}
				],
				venueList: [],
				venueListMore:{page:1}
			}
		},
		onLoad(){
			this.fetch();
		},
		// 页面到达底部触发
		onReachBottom() {
			this.fetch();
		},
		methods: {
			refreshPage(){
				this.venueList = [];
				this.venueListMore = {page:1}
				this.fetch()
			},
			//获取店铺
			fetch() {
				let shop = this.$core.getCurrentShop();
				let shop_id = shop.id;
				this.$utils.fetch(this, 'fitness.manage/shop_lists', {shop_id:shop_id}, 'venueListMore', 'venueList', 'data', data=>{
	
				})
			},
			
			//场馆详情
			setShop(e){
				let shop_id = e ? e : 0;
				let that = this;
				uni.navigateTo({
					url: "/pages/user/venueDetail/venueDetail?shop_id="+shop_id,
					events:{
						setSuccess:function(data){
							that.refreshPage()
						}
					}
				})
			},
			
			click(index, index1) {
				let that = this;
				that.$set(this.venueList[index],'show',false)
				let visible_switch = 0;
				if(index1 == 1) {
					visible_switch = 1
					//this.$u.toast(`启动了第${index}个cell`);
				}
				that.$core.post({url:'fitness.manage/shop_status',data:{shop_id:that.venueList[index].id,visible_switch:visible_switch},success:(ret)=>{
					that.$u.toast(ret.msg);
					
				}});
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.$set(this.venueList[index],'show',true)
				this.venueList.map((val, idx) => {
					if(index != idx) {
						this.$set(this.venueList[idx],'show',false)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.venue-cell {
		margin: 24rpx;
		border-radius: 24rpx;
		overflow: hidden;
		/deep/ .u-swipe-content {
			overflow: hidden;
		}
	}
	.venue-list {
		position: relative;
		padding: 35rpx 32rpx;
		background: #F0F0F0;
		overflow: hidden;
		&.active {
			background: #FFFFFF;
		}
		.state {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 14rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			border-radius: 0 0 0 24rpx;
			line-height: 42rpx;
			font-size: 20rpx;
			color: #FFFFFF;
		}
		.thumb {
			display: block;
			margin-right: 24rpx;
			width: 200rpx;
			height: 144rpx;
			border-radius: 12rpx;
		}
		.title {
			margin-bottom: 4rpx;
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
		}
		.info {
			line-height: 40rpx;
			font-size: 26rpx;
			color: #666666;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
</style>